import Vue from 'vue'
import Vuex from 'vuex'
// import request from '../utils/request'
import axios from '../utils/axios'

// 2. 引入并安装插件
Vue.use(Vuex)



// 3. 实例化数据仓库并配置参数
const store = new Vuex.Store({
    // 全局状态：state （类似与组件中的data）
    // 需要全局共享的数据，都应该放在state中
    // 组件中使用：this.$store.state.xxx
    state: {
        goodslist: [],
    },
    // 类似与组件中的computed
    // 一般用户根据state计算出其他值并用于组件共享
    // 组建中使用：this.$store.getters.xxx
    getters: {
        total(state,) {
            let sum = 0;
            let list = state.goodslist.filter((item) =>
                this.result.includes(item.goodsId)
            );
            list.forEach((item) => {
                sum += item.goodsCount * item.sellingPrice;
            });
            return sum;
        },
    },

    // 修改state的唯一方法，类似于组件中的methods
    // 组件中使用：this.$store.commit(mutationName,payload)
    mutations: {

    },
    // 类似与组件中的methods
    // 一般用于异步操作的封装
    // 组件中调用：this.$store.dispatch(actionName,payload)
    actions: {
        // 请求购物车的数据
        async refresh(context, payload) {
            const { data } = axios
                .get("/shop-cart", payload);
            console.log('context=0', context);
            context.state.goodslist = data;

        },
        // 改变商品的个数
        //change	绑定值被改变时触发	currentValue, oldValue
        // name	原生属性
        async onChange(context, payload) {
            const { data } = await axios.put("/shop-cart", payload);
            // state.goodslist = data;
            console.log(data);

        },
        // 删除商品
        async deleteGood(context, id) {
            const { data } = await axios.delete("/shop-cart/" + id);
            // state.goodslist = data;
            console.log(data);
        },
    }

})

export default store;